<template>
	<view>
		<view class="recommend">
			<view class="title">{{title}}推荐</view>
			<view class="recommend-list">
				<card v-for="(i,index) in 5" :key="index"></card>
			</view>
			<view class="more">
				<text>查看更多{{title}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import card from '@/components/house/card/card.vue';
	const props = defineProps({
		title: {
			type: [String,Number],
			default: 'XX'
		}
	})
</script>

<style lang="scss" scoped>
	.recommend{
		margin: mp-sizing(10) 0;
		display: flex;
		flex-flow: column;
		.title{
			font-size: mp-sizing(20);
			font-weight: 800;
			margin-bottom: mp-sizing(10);
		}
		.recommend-list{
			display: flex;
			flex-flow: column;
		}
		.more{
			width: 90%;
			height: mp-sizing(50);
			margin: auto;
			background-color: $uni-bg-color-grey;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: mp-sizing(10);
			margin-bottom: mp-sizing(20);
			text{
				font-size: mp-sizing(18);
				font-weight: 600;
			}
		}
	}
</style>